<template>
	<view class="content">
		<label class="container-flex-row label-title" style="border: none;">
			地　区：<input :value="pickerText" class="input" placeholder="请选择地区" /><i @click="showMulLinkageThreePicker"
			 class="iconfont iconjiantou area_icon"></i>
		</label>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<view class="line"></view>

		<label class="container-flex-row label-title">
			姓　名：<input v-model="name" class="input " placeholder="请输入您的姓名" />
		</label>
		
		<button @click="changeInfo()">确定</button>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				provinec_id: '',
				city_id: '',
				area_id: '',
				pickerText: '',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 0],
				index: 0,
				name: '',
				phone: ''
			}
		},
		onLoad: function() {
			
		},
		methods: {
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = e.label;
				this.provinec_id = e.provinec_id;
				this.city_id = e.cityCode;
				this.area_id = e.area_id;
			},
			onCancel(e) {
				console.log(e)
			},
			changeInfo() {
				var infoData = {
					'provinec_id': this.provinec_id,
					'city_id': this.city_id,
					'area_id': this.area_id,
					'nicheng': this.name
				}
				if (infoData.provinec_id === '') {
					uni.showToast({
						title: "请选择地区",
						icon: "none"
					})
				} else if (infoData.name === '') {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					})
				} else if (infoData.phone === '') {
					uni.showToast({
						title: "请输入电话",
						icon: "none"
					})
				} else {
					var _this=this;
					this.$zapi.apiPost('user/currency.basic/UpdateBasic', infoData).then(res => {
						var msg = res.data.msg;
						console.log(res.data.code);
						if (res.data.code === 200) {
							setTimeout(function() {
								_this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
									uni.setStorageSync('userInfo',res.data.data);
								});
							}, 2000);
							uni.redirectTo({
								url: '../child/child-add'
							})
						} else {
							uni.showToast({
								title: msg,
								icon: "none"
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #FAFAFA;
	}

	.container-flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ffffff;
	}

	.label-title {
		width: 690upx;
		padding: 0 30upx;
		display: inline-block;
		font-size: 34upx;
		color: #333333;
		min-height: 90upx;
		line-height: 90upx;
		align-items: center;
		border-top: 2upx solid #E5E5E5;
	}

	input {
		width: 400upx;
		display: inline-block;
		overflow: visible;
	}

	.xuanzhan {
		display: inline-block;
		position: absolute;
		right: 30upx;
	}

	.iconfont {
		height: 90upx;
		line-height: 90upx;
	}

	.area_icon {
		position: absolute;
		right: 30upx;
		top: 0upx;
	}

	button {
		background: #FF9900;
		color: #FFFFFF;
		text-align: center;
		width: 690upx;
		margin: 80upx 30upx 0;
		height: 80upx;
		line-height: 80upx;
	}

	button:after {
		border: none;
	}
</style>
